<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="bankCardList">
      <el-table-column label="银行卡号" align="center" prop="bankAccount" width="200" />
      <el-table-column label="真实姓名" align="center" prop="realName" />
      <el-table-column label="身份证号" width="180" align="center" prop="idCardNo" />
      <el-table-column label="手机号" align="center" prop="mobile" width="150" />
      <el-table-column label="银行支行" width="180" align="center" prop="bankBranch" />
      <el-table-column label="银行地区"  width="180" align="center" prop="addressDetails" />
      <el-table-column label="类型" align="center" :show-overflow-tooltip="true" width="80" >
        <template slot-scope="scope">
          <div v-if="scope.row.cardType === 1">个人</div>
          <div v-else>对公</div>
        </template>
      </el-table-column>
      <el-table-column label="开户证明" align="center" :show-overflow-tooltip="true" width="150" >
        <template slot-scope="scope">
          <el-image v-if="scope.row.publicAccountImgUrl" :preview-src-list="[scope.row.publicAccountImgUrl]" :src="scope.row.publicAccountImgUrl" style="width: 60px; height: 60px" />
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="工商营业执照" align="center" :show-overflow-tooltip="true" width="150" >
        <template slot-scope="scope">
          <el-image v-if="scope.row.registrationImgUrl" :preview-src-list="[scope.row.registrationImgUrl]" :src="scope.row.registrationImgUrl" style="width: 60px; height: 60px" />
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="是否默认" align="center" class-name="small-padding fixed-width" fixed="right" >
        <template slot-scope="scope">
          <el-switch readonly :value="scope.row.defaultFlag" :active-value="true" :inactive-value="false" />
          <!-- <el-switch @change="bankDefaultChange(scope.row)" v-model="scope.row.defaultFlag" :active-value="true" :inactive-value="false" /> -->
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>
<script>
import { bankList, bankDefault, bankDelete } from "@/api/asset/asset";
export default {
  name: "integral",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      bankCardList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //设置默认银行卡
    bankDefaultChange(item) {
      if (item.defaultFlag === false) {
        item.defaultFlag = true;
        return this.$modal.msgError("至少设置一个默认银行卡");
      }
      bankDefault(item.bankId).then((res) => {
        if (res.code === 200) {
          this.$modal.msgSuccess("操作成功");
          this.getList();
        }
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$tab.openPage("新增银行卡", "/asset/addCard", {
        count: this.bankCardList.length,
      });
    },
    handleUpdate(item) {
      this.$tab.openPage("修改银行卡", "/asset/addCard", {
        count: this.bankCardList.length,
        id: item.bankId,
      });
    },
    handleDelete(row) {
      if (row.defaultFlag) {
        return this.$modal.msgError("默认银行卡不能删除");
      }
      this.$modal.confirm('是否确认删除卡号为"' + row.bankAccount + '"的银行卡？').then(function () {
        return bankDelete(row.bankId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      bankList(this.queryParams).then((response) => {
        this.bankCardList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.form = {
        pageNo: 1,
        pageSize: 10,
        walletId: 1,
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped></style>
